<template>
  <div class="page" v-if="res">
    <div class="head">
      <h1>商品详情</h1>
      <router-link tag="div" class="backhome" to="/home" replace></router-link>
    </div>
    <div class="panel">
      <div class="monkey">
        <div class="img">
          <img :src="res.monkey.facade" :style="{background: res.monkey.background}" alt="">
        </div>
        <div class="info">
          <p>{{ res.monkey.generation }} {{ $t('代') }} · {{ res.monkey.weight }} kg</p>
          <p>{{ $t('成长') }}: {{ res.monkey.grow }}</p>
          <span>{{ $t('每投喂1颗蟠桃体重增长') }} {{ res.monkey.grow }}kg</span>
          <p>{{ $t('生育') }}: {{ res.monkey.bear }}</p>
          <div class="next">
            <span>{{ res.monkey.bearNum }} {{ $t('次生育，下次') }}:</span>
            <count-down :startTime="new Date().getTime()" :endTime="res.monkey.nextBearDate" endText="准备就绪"></count-down>
          </div>
          <p>{{ $t('力量') }}: {{ res.monkey.makeMoney }}</p>
        </div>
      </div>
      <div class="category">
        <div class="cate-filter">
          <ul class="status">
            <li v-for="(item, index) in category" :class="{'active': index == activeIndex}" @click="changeCategory(index)" :key="index">{{$t(item)}}</li>
          </ul>
        </div>
        <swiper :options="swiperOption" ref="mySwiper" class="swiper">
          <swiper-slide class="brief">
            <ul>
              <li>{{ res.monkey.createTime | formatTime }} {{res.monkey.fatherId == -1 ? $t('从石头中蹦出来了~') : $t('在') + ' #' + res.monkey.fatherId + $t('与') + ' #'+res.monkey.motherId+ $t('的呵护中降生。')}} </li>
              <br>
              <li>{{ $t('出生时获得') }}：{{ res.monkey.initDes }}</li>
            </ul>
          </swiper-slide>
          <swiper-slide class="feed">
            <ul>
              <li @click="feedDetail(item.id)" v-for="(item, index) in records" :key="index">
                <div>{{ item.createTime | formatTime }}</div>
                <div>{{ item.coin }} 颗</div>
                <div>
                  <span v-if="item.addGrow">{{ $t('长') }}+{{ item.addGrow }}</span>
                  <span v-if="item.addBear">{{ $t('育') }}+{{ item.addBear }}</span>
                  <span v-if="item.addMoney">{{ $t('力') }}+{{ item.addMoney }}</span>
                </div>
                <div>↑{{ item.weight }} kg</div>
              </li>
              <infinite-loading @infinite="feedRecords" ref="infiniteLoading2">
                <span slot="no-more"></span>
                <div slot="no-results">
                  <br>
                  <empty></empty>
                </div>
                <spinner slot="spinner" type="lines"></spinner>
              </infinite-loading>
            </ul>
          </swiper-slide>
          <swiper-slide class="family">
            <div class="mate">
              <h3>{{ $t('诞生') }}</h3>
              <div class="item">
                <span>{{ res.monkey.createTime | formatTime }}</span>
                <div class="chain">
                  <!--  + res.familyVO.oneself.firstId -->
                  <router-link class="img" :class="{'self': res.familyVO.oneself.firstId == res.monkey.id}" :to="`/monkey/${res.familyVO.oneself.firstId}`" v-if="res.familyVO.oneself.firstId">
                    <img :src="res.familyVO.oneself.first" :style="{background: res.familyVO.oneself.firstBackground}" alt="">
                  </router-link>
                  <div class="symbol" v-if="res.familyVO.oneself.firstId">+</div>
                  <router-link class="img" :class="{'self': res.familyVO.oneself.secondId == res.monkey.id}" :to="`/monkey/${res.familyVO.oneself.secondId}`" v-if="res.familyVO.oneself.secondId">
                    <img :src="res.familyVO.oneself.second" :style="{background: res.familyVO.oneself.secondBackground}" alt="">
                  </router-link>
                  <div class="symbol" v-if="res.familyVO.oneself.secondId">→</div>
                  <div class="img" :class="{'self': res.familyVO.oneself.id == res.monkey.id}">
                    <img :src="res.familyVO.oneself.child" :style="{background: res.familyVO.oneself.background}" alt="">
                  </div>
                </div>
                <p v-clipboard="res.familyVO.oneself.hash" @success="isCopy(1)" @error="isCopy(0)" :key="1">@{{ res.familyVO.oneself.hash }}</p>
              </div>
            </div>
            <div class="mate" v-if="res.familyVO.childPage.total > 0">
              <h3>{{ $t('孕育') }}</h3>
              <div class="item" v-for="(item, index) in res.familyVO.childPage.records" :key="index">
                <span>{{ item.creatTime }}</span>
                <div class="chain">
                  <router-link class="img" :class="{'self': item.firstId == res.monkey.id}" :to="`/monkey/${item.firstId}`">
                    <img :src="item.first" :style="{background: item.firstBackground}">
                  </router-link>
                  <div class="symbol">+</div>
                  <router-link class="img" :class="{'self': item.secondId == res.monkey.id}" :to="`/monkey/${item.secondId}`">
                    <img :src="item.second" :style="{background: item.secondBackground}">
                  </router-link>
                  <div class="symbol">→</div>
                  <router-link class="img" :class="{'self': item.id == res.monkey.id}" :to="`/monkey/${item.id}`">
                    <img :src="item.child" :style="{background: item.background}">
                  </router-link>
                </div>
                <p v-clipboard="item.hash" @success="isCopy(1)" @error="isCopy(0)" :key="2">@{{ item.hash }}</p>
              </div>
            </div>
          </swiper-slide>
        </swiper>
      </div>
    </div>
    <!--   -->
    <div class="panel" v-if="res.monkey.type == 1 && !res.me">
      <div class="title">
        <h2>{{ $t('购买') }}</h2>
      </div>
      <box gap="20px 0">
        <x-button class="btn" plain :link="`/buy?id=${res.monkey.tid}`">
          <p>{{ res.monkey.price }} 猴毛</p>
          <span>{{ $t('立即购买') }}</span>
        </x-button>
      </box>
    </div>
    <div class="panel" v-if="res.monkey.type == 2 && !res.me">
      <div class="title">
        <h2>{{ $t('生育') }}</h2>
      </div>
      <box gap="20px 0">
        <x-button class="btn" plain @click.native="getMyMonkeyList()">
          <p>{{ res.monkey.price }} 猴毛</p>
          <span>{{ $t('立即生育') }}</span>
        </x-button>
      </box>
    </div>
    <div class="panel" v-if="!res.me">
      <router-link tag="div" class="owner" :to="`/profile/${res.usersVO.myAddress}`">
        <div class="img">
          <img :src="res.usersVO.pic" alt="">
        </div>
        <div class="info">
          <h3>{{ res.usersVO.nickName }}</h3>
          <span>{{$t('于')}}{{ res.monkey.ownTime | formatTime }} {{$t('拥有')}}</span>
        </div>
      </router-link>
    </div>
    <div class="panel" v-if="res.me">
      <help>
        <div>
          <p>*每日可喂食5颗蟠桃，可分次也可一次性喂食。喂食必定会提升0.5、1、2倍体重，概率提升属性值。生育准备就绪后可以鹊桥购买或者售出生育权。出售小猴以及生育权务必仔细确认价格，一经售出无法协调处理。点击拥有小猴玩家可以查询此玩家所有小猴。仅在空闲状态下的小猴才能出售或生育。</p>
        </div>
      </help>
      <div class="title">
        <h2>{{$t('操作')}}</h2>
      </div>
      <div class="btns">
        <div>
          <x-button mini type="primary" @click.native="operate(0,res.monkey.type,res.monkey.status)">{{ $t('喂养') }}</x-button>
          <span>{{ res.monkey.growIng }}/{{ res.monkey.growLimit }}</span>
        </div>
        <div>
          <x-button mini type="warn" @click.native="operate(1,res.monkey.type,res.monkey.status)">{{ $t('出售') }}{{ res.monkey.type == 1 ? $t('中') : '' }}</x-button>
        </div>
        <div>
          <x-button mini type="primary" @click.native="operate(2,res.monkey.type,res.monkey.status)">{{ $t('生育') }}{{ res.monkey.type == 2 ? $t('中') : '' }}</x-button>
          <span>{{ res.monkey.nextBearDate | formatRemainTime($t('准备就绪')) }}</span>
        </div>
      </div>
      <div class="operate" v-if="activeOperate != null">
        <div class="feeding" v-show="activeOperate == 0">
          <div class="feed-wkc">
            <p>{{ $t('当前小猴ID') }}：#{{ id }}，{{ $t('桃子数量') }}：{{ res.usersVO.peenToToken }}</p>
            <span v-if="feedCoinList.length > 0">{{ $t('投食') }}：</span>
            <ul class="list">
              <li v-for="(item,index) in feedCoinList" :key="index">
                <div>{{ item.createTime | formatTime1 }}</div>
                <div>{{ item.coin }}颗</div>
                <div>x{{ item.rate }}</div>
                <div>
                  <span v-if="item.weight">{{ $t('体重') }}+{{ item.weight }}kg</span>
                  <span v-if="item.addGrow">{{ $t('长') }}</span>
                  <span v-if="item.addBear">{{ $t('育') }}</span>
                  <span v-if="item.addMoney">{{ $t('力') }}</span>
                </div>
              </li>
            </ul>
            <div class="feed-btns">
              <x-button type="primary" @click.native="feedingCoin(1)">1 颗</x-button>
              <x-button type="warn" @click.native="feedingCoin(5)">5 颗</x-button>
            </div>
          </div>
        </div>
        <div class="selling" v-if="activeOperate == 1">
          <group>
            <x-input :title="$t('出售价')" :placeholder="$t('请输入出售价格')" type="number" :disabled="res.monkey.status == 1" v-model="sellPrice"></x-input>
          </group>
          <div class="tip">
            <span>{{ $t('出售') }} #{{ id }}</span> {{ $t('手续费') }} {{ res.usersVO.buyFree * 100 }}%，{{ $t('冻结余额') }} {{ freezeSell }}猴毛，{{ $t('以实际成交价为准') }}
          </div>
          <box gap="20px 0">
            <x-button type="warn" @click.native="publishSellConfirm" v-if="res.monkey.status == 0" :disabled="!Number(sellPrice) || Number(sellPrice) < 0">{{ $t('出售小猴') }}</x-button>
            <x-button type="warn" @click.native="cancleSell" v-if="res.monkey.status == 1">{{ $t('撤单') }}</x-button>
          </box>
        </div>
        <div class="breeding" v-if="activeOperate == 2">
          <group>
            <x-input :title="$t('生育价')" :placeholder="$t('请输入生育价格')" type="number" :disabled="res.monkey.status == 2" v-model="breedPrice"></x-input>
          </group>
          <div class="tip">
            {{ $t('生育手续费') }} {{ res.usersVO.bearFree * 100 }}%，{{ $t('冻结') }} {{ freezeBreed }}猴毛，{{ $t('以实际成交价为准') }}。
          </div>
          <box gap="20px 0">
            <x-button type="primary" @click.native="publishBreedConfirm" v-if="res.monkey.status == 0" :disabled="!Number(breedPrice) || Number(breedPrice) < 0">{{ $t('出售生育权') }}</x-button>
            <x-button type="primary" @click.native="cancleBreed" v-if="res.monkey.status == 2">{{ $t('撤单') }}</x-button>
          </box>
        </div>
      </div>
    </div>
    <div v-transfer-dom>
      <popup v-model="showPicker" height="60%" class="picker-list">
        <h2>{{ $t('选择要生育的猴子') }}</h2>
        <div class="filter">
          <ul class="order">
          </ul>
          <div class="btns">
            <div class="option" @click="showFilter = true"></div>
          </div>
        </div>
        <div class="panel" :class="{'disable': !canBirth(item.nextBearDate) }" @click="chooseMonkey(canBirth(item.nextBearDate), item.id)" v-for="(item,index) in myMonkeyList" :key="index">
          <div class="img">
            <img :src="item.facade" :style="{background: item.background}">
          </div>
          <div class="info">
            <div># {{ item.id }} · {{ item.generation }}{{ $t('代') }}</div>
            <div>成长：{{item.grow}}/生育：{{item.bear}}/力量：{{item.makeMoney}}</div>
            <div>体重：{{item.weight}}</div>
          </div>
        </div>
      </popup>
    </div>
    <div v-transfer-dom>
      <x-dialog v-model="showScrollBox" v-if="feedInfo" hide-on-blur class="dialog">
        <h2>{{ $t('投食详情') }}</h2>
        <div class="content">
          <div class="time">{{feedInfo.createTime | formatTime}} → {{feedInfo.coin}}蟠桃</div>
          <div class="address" v-clipboard="feedInfo.hash" @success="isCopy(1)" @error="isCopy(0)" :key="5">
            hash: <br> {{ feedInfo.hash }}
          </div>
          <div class="item">
            <span>{{ $t('体重') }} ↑</span>
            <p>+{{feedInfo.weight}}</p>
          </div>
          <div class="item">
            <span>{{ $t('属性') }} ↑</span>
            <p>{{ $t('成长值') }} +{{feedInfo.addGrow }}</p>
            <p>{{ $t('生育值') }} +{{feedInfo.addBear }}</p>
            <p>{{ $t('力量值') }} +{{feedInfo.addMoney }}</p>
          </div>
          <div class="tip">*投食蟠桃的hash最后一位数字与当前星期值是一致时获得双倍体重，其他1-7数字是获得单倍体重，0、8、9增加0.5倍体重。<br>*投食蟠桃hash与当前属性值十分位数字一致时获得对应属性值提升，提升值=投食金额/10。<br>*小猴体重达到100kg后进入成长衰减期，每次投食增加体重减半，如体重125kg，投食4蟠桃，基础体重增加2kg，到达150后将会再次减半，以此类推，暴击、属性叠加的加成不变；<br>*属性到达5后每次增加数值减半，到达10后会再次减半，如当前属性5，投食5个蟠桃，触发属性增长，则属性增长0.25为5.25。</div>
        </div>
        <div @click="showScrollBox=false">
          <span class="vux-close"></span>
        </div>
      </x-dialog>
    </div>
    <div v-transfer-dom>
      <x-dialog v-model="showNoMoney" hide-on-blur class="dialog">
        <h2>{{ $t('账户余额不足') }}</h2>
        <div class="content">
          <div class="tip">出售、生育需要收取一定比例的手续费，挂单时系统会从你的账户中冻结手续费。请保证账户余额充足。</div>
          <div class="transfer">请使用账户的绑定钱包向下方地址进行进行转账，转账后系统将在1-3分钟内自动到账。</div>
          <div class="address center" v-clipboard="chargeAddress" @success="isCopy(1)" @error="isCopy(0)" :key="6">{{ chargeAddress }}</div>
        </div>
        <div @click="showNoMoney=false">
          <span class="vux-close"></span>
        </div>
      </x-dialog>
    </div>
    <!-- 复杂筛选 -->
    <div v-transfer-dom>
      <popup v-model="showFilter" position="right" width="100%" class="filters">
        <div class="wrap">
          <div class="block">
            <group :title="$t('代数')" class="input-range">
              <x-input v-model="params.startGen" type="number" novalidate :placeholder="$t('最低')"></x-input>
              <div class="dash"></div>
              <x-input v-model="params.endGen" type="number" novalidate :placeholder="$t('最高')"></x-input>
            </group>
            <group :title="$t('体重')" class="input-range">
              <x-input v-model="params.startWeight" type="number" novalidate :placeholder="$t('最低')"></x-input>
              <div class="dash"></div>
              <x-input v-model="params.endWeight" type="number" novalidate :placeholder="$t('最高')"></x-input>
            </group>
            <group :title="$t('力量值')" class="input-range">
              <x-input v-model="params.startMakeMoney" type="number" novalidate :placeholder="$t('最低')"></x-input>
              <div class="dash"></div>
              <x-input v-model="params.endMakeMoney" type="number" novalidate :placeholder="$t('最高')"></x-input>
            </group>
          </div>
        </div>
        <div class="button">
          <x-button type="warn" class="btn" @click.native="resetFilter">{{$t('重置')}}</x-button>
          <x-button type="primary" class="btn" @click.native="enterFilter">{{$t('确定')}}</x-button>
        </div>
      </popup>
    </div>
  </div>
</template>

<script>
  import {
    XButton,
    Box,
    Group,
    Cell,
    Range,
    XInput,
    TransferDomDirective as TransferDom,
    Popup,
    Clocker,
    XDialog,
    Spinner,
    InlineXNumber
  } from 'vux'
  import empty from './common/empty.vue'
  import CountDown from './common/vue2-countdown.vue'
  import InfiniteLoading from 'vue-infinite-loading';
  import Help from './common/help.vue'
  import {
    log
  } from 'util';
  export default {
    directives: {
      TransferDom
    },
    components: {
      XButton,
      Box,
      Group,
      Cell,
      Range,
      XInput,
      empty,
      Popup,
      Clocker,
      XDialog,
      CountDown,
      InlineXNumber,
      Spinner,
      InfiniteLoading,
      Help
    },
    data() {
      return {
        category: ['简介', '喂养记录', '族谱'],
        activeIndex: 0,
        time: 0,
        sellPrice: null,
        breedPrice: null,
        activeOperate: null,
        id: '',
        res: null,
        showPicker: false,
        myMonkeyList: [],
        showScrollBox: false,
        showNoMoney: false,
        feedInfo: null,
        chargeAddress: null,
        safePwd: '',
        swiperOption: {
          autoHeight: true,
          spaceBetween: 30,
          on: {
            transitionEnd: () => {
              this.activeIndex = this.swiper.activeIndex
            },
          },
        },
        feedCoin: 1,
        feedCoinList: [],
        PeachNum: 10,
        records: [],
        current: 1,
        showFilter: false,
        params: {
          startGen: '',
          endGen: '',
          startMakeMoney: '',
          endMakeMoney: '',
          startWeight: '',
          endWeight: '',
        },
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      },
      freezeSell() {
        return (this.sellPrice * this.res.usersVO.buyFree).toFixed(2)
      },
      freezeBreed() {
        return (this.breedPrice * this.res.usersVO.bearFree).toFixed(2)
      },
    },
    beforeRouteUpdate(to, from, next) {
      // react to route changes...
      next()
      this.id = this.$route.params.id;
      this.initData();
    },
    mounted() {
      this.$nextTick(function() {
        this.id = this.$route.params.id;
        this.initData();
      });
    },
    methods: {
      initData() {
        this.$http
          .get(`/game/detail/${this.id}`)
          .then(res => {
            if (res.code == 200) {
              if (res.result.monkey) {
                this.res = res.result;
                if (res.result.monkey.status == 1) {
                  this.sellPrice = res.result.monkey.price
                }
                if (res.result.monkey.status == 2) {
                  this.breedPrice = res.result.monkey.price
                }
              } else {
                this.$router.replace('/404')
              }
            } else {
              this.$router.replace('/404')
            }
          })
          .catch(function(error) {});
      },
      feedingCoin(peach) {
        this.$vux.loading.show({
          text: this.$t('喂食中')
        })
        this.$http
          .post(`/game/balanceFeed`, {
            coin: peach,
            monkeyId: this.id
          })
          .then(res => {
            this.$vux.loading.hide()
            if (res.code == 200) {
              // this.initData()
              this.feedCoinList.unshift(res.result)
              if (this.feedCoinList.length > 5) {
                this.feedCoinList.pop()
              }
              this.res.monkey.growIng = (Number(this.res.monkey.growIng) + peach);
              console.log(res);
              if (res.result.money) {
                this.res.monkey.makeMoney = res.result.money
              }
              if (res.result.weight) {
                this.res.monkey.weight = res.result.currentWeight
              }
              if (res.result.grow) {
                this.res.monkey.grow = res.result.grow
              }
              if (res.result.bear) {
                this.res.monkey.bear = res.result.bear
              }
              this.res.usersVO.peenToToken -= peach
            } else {
              this.$vux.toast.text(res.msg)
            }
          })
          .catch(function(error) {
            this.$vux.loading.hide()
          });
      },
      feedRecords($state) {
        this.$http
          .post(`/game/feedPageByMonkey`, {
            current: this.current,
            monkeyId: this.id
          })
          .then(res => {
            if (res.code == 200) {
              if (res.result.total > 0) {
                this.records = this.records.concat(res.result.records);
                $state.loaded();
                if (res.result.current < res.result.pages) {
                  this.current += 1;
                } else {
                  $state.complete();
                }
              } else {
                $state.complete();
              }
            } else {}
          })
          .catch(function(error) {});
      },
      operate(index, type, status) {
        if ((status == 1 || (status == 3 && type == 1)) && index == 2) {
          this.$vux.toast.text(this.$t('猴子正在出售中不可生育！'))
          return
        }
        if ((status == 2 || (status == 3 && type == 2)) && index == 1) {
          this.$vux.toast.text(this.$t('猴子正在生育中不可出售！'))
          return
        }
        this.activeOperate = index;
      },
      changeCategory(index) {
        this.activeIndex = index
        this.swiper.slideTo(index, 300, true);
      },
      getMyMonkeyList() {
        var that = this
        this.$http
          .post(`/game/chooseMonkeyList`, this.params)
          .then(res => {
            if (res.code == 200) {
              this.myMonkeyList = res.result;
              if (res.result.length == 0) {
                this.$vux.confirm.show({
                  title: this.$t('提示'),
                  content: this.$t('噢哟~ 你还没有可以生育猴子，赶快去买一只吧'),
                  confirmText: '去逛逛',
                  onCancel() {},
                  onConfirm() {
                    that.$router.push('/market')
                  }
                })
              } else {
                this.showPicker = true
              }
            } else {
              this.$vux.toast.text(res.msg)
            }
          })
          .catch(function(error) {});
      },
      resetFilter() {
        this.params.startGen = '';
        this.params.endGen = '';
        this.params.startMakeMoney = '';
        this.params.endMakeMoney = '';
        this.params.startWeight = '';
        this.params.endWeight = '';
      },
      enterFilter() {
        this.getMyMonkeyList()
        this.showFilter = false
      },
      chooseMonkey(canBirth, monkeyId) {
        if (canBirth) {
          this.showPicker = false;
          this.$router.push(`/breed?id=${monkeyId}&tid=${this.res.monkey.tid}`)
        } else {
          this.$vux.toast.text(this.$t('当前猴子暂不可生育'))
        }
      },
      publishSellConfirm() {
        var that = this;
        if (that.sellPrice < that.res.marketPrice * 0.6) {
          this.$vux.confirm.show({
            title: `警告！`,
            content: `
                                  <p style="color: red">当前出售小猴的价格低于市场最低价，确认出售吗？</p>
                                  `,
            cancelText: '撤销',
            confirmText: '出售',
            onCancel() {
              that.$vux.toast.text('已取消')
            },
            onConfirm() {
              that.sellConfirm()
            }
          })
        } else {
          that.sellConfirm()
        }
      },
      sellConfirm() {
        var that = this;
        this.$vux.confirm.show({
          title: `出售小猴 #${that.id}`,
          content: `
                                <p>确认以${that.sellPrice}猴毛的价格<strong style="color: red">出售小猴</strong> #${that.id}吗?</p>
                                <p style="color: red">发布出售成功后，如果被买家拍下付款，小猴将不能退回哦！</p>
                                `,
          cancelText: '撤销',
          confirmText: '出售',
          onCancel() {
            that.$vux.toast.text('已取消')
          },
          onConfirm() {
            that.publishSell()
          }
        })
      },
      // 出售
      publishSell() {
        var that = this;
        this.$http
          .post(`/game/buyPublish`, {
            id: this.id,
            coin: this.sellPrice,
            pwd: this.safePwd
          }).then(res => {
            if (res.code == 200) {
              this.res.monkey.status = 1
              this.res.monkey.type = 1
              this.res.monkey.tid = res.result
              // this.sellPrice = null
              this.$vux.toast.text(res.msg)
            } else if (res.code == 602) {
              // 账户余额不足
              this.$vux.toast.text('猴毛不足')
              // this.chargeAddress = res.msg
              // this.showNoMoney = true
            } else if (res.code == 603) {
              // 未设置安全密码
              this.$vux.confirm.show({
                title: this.$t(`提示`),
                content: this.$t(`你还未设置安全密码！`),
                confirmText: this.$t('去设置'),
                onConfirm() {
                  that.$router.push('/mine?pwd=true')
                }
              })
            } else if (res.code == 604) {
              // 未输入安全密码
              this.safePwd = ''
              if (res.msg == this.$t('安全密码错误')) {
                this.$vux.toast.text(res.msg)
              }
              this.$vux.confirm.prompt(this.$t('请输入安全密码'), {
                title: this.$t('安全验证'),
                inputAttrs: {
                  type: 'password'
                },
                onConfirm(value) {
                  that.safePwd = value;
                  that.publishSell()
                }
              })
            } else {
              this.$vux.toast.text(res.msg)
            }
          })
          .catch(function(error) {});
      },
      // 撤销出售
      cancleSell() {
        this.$http
          .post(`/game/buyPublishRepeal`, {
            id: this.res.monkey.tid,
          }).then(res => {
            this.$vux.toast.text(res.msg)
            if (res.code == 200) {
              this.res.monkey.status = 0
              this.res.monkey.type = 0
              this.sellPrice = null
            } else {}
          })
          .catch(function(error) {});
      },
      publishBreedConfirm() {
        var that = this;
        this.$vux.confirm.show({
          title: '出售生育权',
          content: `确认以${that.breedPrice}猴毛的价格出售#${that.id}的生育权吗？`,
          onCancel() {
            that.$vux.toast.text('已取消')
          },
          onConfirm() {
            that.publishBreed()
          }
        })
      },
      // 生育
      publishBreed() {
        var that = this
        this.$http
          .post(`/game/bearPublish`, {
            id: this.id,
            coin: this.breedPrice,
            pwd: this.safePwd
          }).then(res => {
            if (res.code == 200) {
              this.res.monkey.status = 2
              this.res.monkey.type = 2
              this.res.monkey.tid = res.result
              // this.breedPrice = null
              this.$vux.toast.text(res.msg)
            } else if (res.code == 602) {
              // 账户余额不足
              this.$vux.toast.text('猴毛不足')
            } else if (res.code == 603) {
              // 未设置安全密码
              this.$vux.confirm.show({
                title: this.$t(`提示`),
                content: this.$t(`你还未设置安全密码！`),
                confirmText: this.$t('去设置'),
                onConfirm() {
                  that.$router.push('/mine?pwd=true')
                }
              })
            } else if (res.code == 604) {
              // 未输入安全密码
              this.safePwd = ''
              if (res.msg == this.$t('安全密码错误')) {
                this.$vux.toast.text(res.msg)
              }
              this.$vux.confirm.prompt(this.$t('请输入安全密码'), {
                title: this.$t('安全验证'),
                inputAttrs: {
                  type: 'password'
                },
                onConfirm(value) {
                  that.safePwd = value;
                  that.publishBreed()
                }
              })
            } else {
              this.$vux.toast.text(res.msg)
            }
          })
          .catch(function(error) {});
      },
      // 撤销生育
      cancleBreed() {
        this.$http
          .post(`/game/bearPublishRepeal`, {
            id: this.res.monkey.tid,
          }).then(res => {
            this.$vux.toast.text(res.msg)
            if (res.code == 200) {
              this.res.monkey.status = 0
              this.res.monkey.type = 0
              this.breedPrice = null
            } else {}
          })
          .catch(function(error) {});
      },
      // 对比时间戳，是否可生育
      canBirth(endTime) {
        var timestamp = Date.parse(new Date());
        return timestamp > endTime
      },
      feedDetail(id) {
        this.$http
          .get(`/game/feedRecordDetail/${id}`).then(res => {
            if (res.code == 200) {
              this.feedInfo = res.result
              this.showScrollBox = true
            } else {}
          })
          .catch(function(error) {});
      }
    }
  }
</script>

<style lang="scss" scoped>
  .page {
    position: relative;
    &:before {
      content: '';
      width: 1px;
      min-height: 101%;
      position: absolute;
    }
  }
  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .monkey {
    display: flex;
    .img {
      margin-right: 10px;
      width: 120px;
      height: 120px;
      border-radius: 4px;
      overflow: hidden;
      flex-shrink: 0;
      img {
        width: 120px;
        height: 120px;
        background-color: #e5ffde;
        border-radius: 2px;
      }
    }
    .info {
      font-size: 12px;
      height: 120px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      line-height: 1; // white-space: nowrap;
      span {
        color: $grey;
      }
      .next {
        span {
          vertical-align: middle;
        }
        color: $grey;
      }
      p {
        color: #333;
      }
    }
  }
  .category {
    padding-top: 15px;
  }
  .cate-filter {
    display: flex;
    justify-content: space-between;
    white-space: nowrap;
    font-size: 12px;
    background: #fff;
    height: 40px;
    line-height: 40px;
    padding: 0 12px;
    border-bottom: 1px solid #dfdfdf;
    ul {
      display: flex;
      align-items: center;
      li {
        cursor: pointer;
      }
    }
    .status {
      color: $grey;
      li {
        transition: all .3s;
      }
      li:not(:last-child) {
        margin-right: 12px;
      }
      .active {
        color: $green;
        font-size: 14px;
        border-bottom: 2px solid $green;
      }
    }
  }
  .filters {
    overflow: hidden;
    background: #fbf9fe;
    &::-webkit-scrollbar {
      display: none;
    }
    .wrap {
      padding-bottom: 60px;
      height: 100%;
      overflow-y: scroll;
      padding: 12px;
    }
    .button {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      display: flex;
      .btn {
        width: 50%;
        height: 40px;
        margin: 0;
        border: 0;
        border-radius: 0;
        &:after {
          display: none;
        }
      }
    }
  }
  .swiper {
    margin-top: 10px;
  }
  .brief {
    font-size: 12px;
    color: $grey;
  }
  .feed {
    ul {
      max-height: 200px;
      overflow-y: scroll;
    }
    li {
      font-size: 10px;
      display: flex;
      padding: 5px 4px;
      white-space: nowrap;
      color: $grey;
      &:nth-child(even) {
        background-color: #f5f5f5;
      }
      div {
        width: 20%;
        overflow: hidden;
        text-overflow: ellipsis;
        &:first-child {
          width: 40%;
        }
        &:last-child {
          text-align: right;
        }
      }
    }
  }
  .family {
    .mate {
      h3 {
        font-size: 12px;
      }
      .item {
        span {
          font-size: 10px;
          color: $grey;
        }
        p {
          font-size: 10px;
          color: $grey;
          word-break: break-all;
        }
        .chain {
          display: flex;
          .img {
            width: 40px;
            height: 40px;
            img {
              width: 100%;
              background-color: #d9f5cb;
            }
          }
          .self {
            border: 1px dashed #e2e2df;
            border-radius: 2px;
          }
          .symbol {
            width: 38px;
            height: 40px;
            text-align: center;
            line-height: 40px;
          }
        }
      }
    }
  }
  .owner {
    display: flex;
    .img {
      width: 60px;
      height: 60px;
      margin-right: 10px;
      img {
        width: 100%;
        border-radius: 50%;
        background-color: #d9f5cb;
      }
    }
    .info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      h3 {
        font-size: 16px;
        color: $gray;
      }
      span {
        font-size: 12px;
        color: $grey;
      }
    }
  }
  .sell {
    padding: 20px;
    display: flex;
    text-align: center;
    height: 85px;
    .price {
      white-space: nowrap;
      line-height: 1.2;
      padding: 0 10px;
      h4 {
        font-size: 30px;
        color: $gray;
      }
      span {
        font-size: 12px;
        color: $grey;
      }
    }
    .progress {
      height: 100%;
      flex: 1;
      .slider {
        height: 50%;
        border-bottom: 1px solid $grey;
        position: relative;
        div {
          width: 15px;
          height: 15px;
          background: url(../assets/monkey.png) no-repeat;
          background-size: 100%;
          position: absolute;
          left: 0;
          bottom: 2px;
        }
      }
      .time {
        padding-top: 5px;
        font-size: 12px;
        color: $grey;
        line-height: 1;
      }
    }
  }
  .btn {
    width: 185px;
    height: 64px;
    line-height: 1;
    border: 1px solid $green;
    p {
      font-size: 20px;
      color: $green;
    }
    span {
      font-size: 12px;
      color: $gray;
    }
  }
  .btns {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    div {
      width: 25%;
      text-align: center;
      span {
        font-size: 10px;
        color: $grey;
        white-space: nowrap;
      }
      button {
        margin: 0 auto;
        display: block;
        white-space: nowrap;
      }
    }
  }
  .operate {
    border-top: 1px solid #d9d9d9;
  }
  .operate {
    .tip {
      font-size: 12px;
      padding: 10px 0;
      color: $grey;
      span {
        color: $red;
      }
    }
  }
  .feeding {
    padding: 10px 0;
    font-size: 12px; // text-align: center;
    .feed-wkc {
      p {
        color: $gray;
      }
      span {
        color: $grey;
      }
      .list {
        li {
          display: flex;
          white-space: nowrap;
          padding: 5px 0;
          color: $gray;
          div {
            overflow: hidden;
            text-overflow: ellipsis;
            &:nth-child(1) {
              width: 60px;
            }
            &:nth-child(2) {
              background: url(/static/peach.svg) no-repeat;
              background-size: 20px 20px;
              width: 80px;
              padding-left: 20px;
            }
            &:nth-child(3) {
              width: 30px;
            }
          }
        }
      }
      .feed-btns {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40px;
        margin-top: 20px;
        button {
          width: 40%;
          margin: 10px;
          flex-shrink: 0;
          height: 40px;
        }
      }
    }
  }
  .picker-list {
    // width: 100%;
    // min-height: 100%;
    background-color: #fbf9fe;
    h2 {
      text-align: center;
      font-size: 16px;
      color: $tmdark;
      padding: 10px 0;
    }
    .panel {
      display: flex;
      .img {
        width: 60px;
        height: 60px;
        margin-right: 10px;
        img {
          width: 100%;
          background-color: #e5ffde;
        }
      }
      .info {
        height: 60px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-size: 12px;
        color: $grey;
        white-space: nowrap;
        span {
          color: #333;
        }
        em {
          font-style: normal;
        }
      }
      &.disable {
        filter: grayscale(100%); // background-color: #fff;
      }
    }
    .filter {
      display: flex;
      justify-content: space-between;
      white-space: nowrap; // flex-wrap: wrap;
      font-size: 12px;
      background: #fff;
      height: 40px;
      line-height: 40px;
      padding: 0 12px;
      margin: 0 8px 12px;
      border-radius: 4px;
      box-shadow: 3px 3px 10px 0px rgba(158, 158, 158, 0.4);
      overflow-x: scroll;
      overflow-y: hidden;
      &::-webkit-scrollbar {
        display: none;
      }
      ul {
        display: flex;
        align-items: center;
        li {
          cursor: pointer;
        }
      }
      .order {
        color: $link;
        li+li {
          margin-left: 12px;
        }
        .active:after {
          content: "";
          display: inline-block;
          vertical-align: middle;
          margin-top: -2px;
          width: 12px;
          height: 12px;
          background: url() no-repeat 50%;
          background-size: cover;
        }
        .active.up:after {
          transform: rotate(-180deg);
        }
      }
      .btns {
        display: flex;
        align-items: center;
        .option {
          width: 28px;
          height: 28px;
          margin-left: 5px;
          background: url() no-repeat 50%;
          background-size: 16px 16px;
        }
      }
    }
  }
  .dialog {
    h2 {
      font-size: 20px;
      padding: 15px 0 0;
    }
    .content {
      padding: 12px;
      text-align: left;
      max-height: 400px;
      overflow-y: scroll;
      .time {
        font-size: 12px;
        color: $gray;
      }
      .address {
        color: $grey;
        word-break: break-all;
        font-size: 12px;
        padding: 10px 0;
        line-height: 1.2;
      }
      .transfer {
        font-size: 14px;
        color: $gray;
      }
      .item {
        color: $gray;
        margin-bottom: 10px;
        span {
          color: $green;
        }
      }
      .tip {
        font-size: 12px;
        color: $grey;
      }
      .center {
        text-align: center;
      }
    }
  }
</style>

<style lang="scss">
  .operate {
    .weui-cells {
      &:before {
        display: none;
      }
      &:after {
        // display: none;
      }
      .weui-cell {
        &:before {
          left: 0;
        }
        padding: 10px 15px 10px 0;
      }
    }
    .num {
      .weui-cells {
        height: 40px;
        .weui-cell {
          height: 40px;
          padding: 10px 15px;
          border: 1px solid #D9D9D9;
          input {
            text-align: center;
          }
        }
      }
    }
    .vux-inline-x-number {
      div {
        display: flex;
      }
      .vux-number-selector {
        height: 40px;
        margin: 0;
        line-height: 32px;
        svg {
          fill: #333
        }
      }
      input {
        height: 40px;
        flex: 1;
        border-left: 1px solid transparent;
        border-right: 1px solid transparent;
      }
      .vux-number-selector-plus {
        border-left: 1px solid transparent;
      }
    }
  }
</style>
